.block-up {
  background-color: var(--increase-color);
  box-shadow: 0 2px 5px var(--increase-color);
  transition: all 0.3s;
}

.block-down {
  background-color: var(--reduce-color);
  box-shadow: 0 2px 5px var(--reduce-color);
  transition: all 0.3s;
}

.block-none {
  background-color: var(--reverse-text-color);
  box-shadow: 0 2px 5px var(--reverse-text-color);
  transition: all 0.3s;
}

.bg-up {
  transition: all 0.3s;

  &:hover {
    background-image: linear-gradient(
      to right,
      var(--background-color),
      var(--increase-bg-color)
    ) !important;
  }
}

.bg-down {
  transition: all 0.3s;

  &:hover {
    background-image: linear-gradient(
      to right,
      var(--background-color),
      var(--reduce-bg-color)
    ) !important;
  }
}

.text-up {
  color: var(--increase-color);
}

.text-down {
  color: var(--reduce-color);
}

.text-none {
  color: var(--reverse-text-color);
}

.svg-up {
  fill: var(--increase-color);
}

.svg-down {
  fill: var(--reduce-color);
}
.svg-none {
  fill: var(--reverse-text-color);
}
